```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用驱动学习 - Cookie & Session 详解</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        .highlight {
            position: relative;
            z-index: 1;
        }
        .highlight:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            background-color: rgba(118, 75, 162, 0.2);
            z-index: -1;
            transition: height 0.3s ease;
        }
        .highlight:hover:after {
            height: 100%;
        }
        .dropdown-content {
            display: none;
            transition: all 0.3s ease;
        }
        .dropdown:hover .dropdown-content {
            display: block;
        }
        .mermaid {
            background-color: white;
            padding: 20px;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">应用驱动学习</h1>
                <h2 class="text-2xl md:text-3xl font-semibold mb-6">Cookie & Session 详解</h2>
                <p class="text-lg mb-8 opacity-90">探索Web开发中会话管理的核心技术，构建更安全、更智能的用户体验</p>
                <div class="flex space-x-4">
                    <a href="#session" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105">Session详解</a>
                    <a href="#cookie" class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 px-6 py-3 rounded-full font-medium transition-all duration-300 transform hover:scale-105">Cookie原理</a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="relative w-64 h-64 md:w-80 md:h-80 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                    <div class="absolute w-56 h-56 md:w-72 md:h-72 bg-white bg-opacity-20 rounded-full"></div>
                    <div class="absolute w-48 h-48 md:w-64 md:h-64 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                        <i class="fas fa-lock text-6xl md:text-7xl"></i>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl py-12 px-4 md:px-0">
        <!-- Personal Dashboard Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-user-cog text-purple-600 text-xl"></i>
                </div>
                <h2 id="dashboard" class="text-3xl font-bold text-gray-800">学员的个人后台管理</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-6">
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-start mb-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-user-edit text-blue-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800">1. 编辑个人信息</h3>
                    </div>
                    <p class="text-gray-600 mb-4">用户可以查看和修改个人资料信息（用户名只展示不可更改）</p>
                    <div class="bg-gray-50 p-4 rounded">
                        <div class="mb-3">
                            <label class="block text-gray-700 text-sm font-medium mb-1">用户名</label>
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-100" value="student123" readonly>
                        </div>
                        <div class="mb-3">
                            <label class="block text-gray-700 text-sm font-medium mb-1">电子邮箱</label>
                            <input type="email" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" value="user@example.com">
                        </div>
                        <div class="mb-3">
                            <label class="block text-gray-700 text-sm font-medium mb-1">手机号码</label>
                            <input type="tel" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500" value="13800138000">
                        </div>
                        <button class="mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition-colors duration-300">保存更改</button>
                    </div>
                </div>
                
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-start mb-4">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-key text-green-600"></i>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800">2. 修改个人密码</h3>
                    </div>
                    <p class="text-gray-600 mb-4">用户可以修改账户登录密码，确保账户安全</p>
                    <div class="bg-gray-50 p-4 rounded">
                        <div class="mb-3">
                            <label class="block text-gray-700 text-sm font-medium mb-1">原始密码</label>
                            <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="mb-3">
                            <label class="block text-gray-700 text-sm font-medium mb-1">新密码</label>
                            <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div class="mb-3">
                            <label class="block text-gray-700 text-sm font-medium mb-1">确认密码</label>
                            <input type="password" class="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <button class="mt-2 bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded transition-colors duration-300">修改密码</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- Cookie & Session Content -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                    <i class="fas fa-cookie-bite text-indigo-600 text-xl"></i>
                </div>
                <h2 id="cookie-session" class="text-3xl font-bold text-gray-800">Cookie & Session</h2>
            </div>
            
            <div class="space-y-8">
                <!-- 会话概念 -->
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-comments text-purple-600"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-800">会话（如同打电话，多次交互）</h3>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <h4 class="font-semibold text-blue-800 mb-2">什么是会话？</h4>
                            <p class="text-gray-700">会话可简单理解为：用户开一个浏览器，点击多个超链接，访问服务器多个web资源，然后关闭浏览器，整个过程称之为一个会话。</p>
                        </div>
                        
                        <div class="p-4 bg-yellow-50 rounded-lg">
                            <h4 class="font-semibold text-yellow-800 mb-2">会话过程中需要解决的问题是什么？</h4>
                            <p class="text-gray-700">每个用户在使用浏览器与服务器进行会话的过程中，不可避免各自会产生一些数据，程序要想办法为每个用户保存这些数据。例如：实现购物车功能，用户通过浏览网页，将一些合适的商品加入购物车，在用户进行买单的时候，怎么将这些购物车的信息都保存正确？</p>
                        </div>
                        
                        <div class="p-4 bg-red-50 rounded-lg">
                            <h4 class="font-semibold text-red-800 mb-2">思考</h4>
                            <p class="text-gray-700">用户加入的购物车的商品信息是否可以保存在request或者ServletContext中？</p>
                        </div>
                    </div>
                </div>
                
                <!-- 保存会话数据的技术 -->
                <div id="cookie" class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-database text-green-600"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-800">保存会话数据的两种技术</h3>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="p-4 bg-green-50 rounded-lg border-l-4 border-green-500">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-cookie text-green-600 mr-2"></i>
                                <h4 class="font-bold text-green-800">Cookie</h4>
                            </div>
                            <p class="text-gray-700">Cookie是客户端技术，程序把每个用户的数据以cookie的形式写给用户各自的浏览器。当用户使用浏览器再去访问服务器中的web资源时，就会带着各自的数据去。这样，web资源处理的就是用户各自的数据了。</p>
                        </div>
                        
                        <div class="p-4 bg-indigo-50 rounded-lg border-l-4 border-indigo-500">
                            <div class="flex items-center mb-2">
                                <i class="fas fa-server text-indigo-600 mr-2"></i>
                                <h4 class="font-bold text-indigo-800">HttpSession</h4>
                            </div>
                            <p class="text-gray-700">Session是服务器端技术，利用这个技术，服务器在运行时可以为每一个用户的浏览器创建一个其独享的HttpSession对象，由于session为用户浏览器独享，所以用户在访问服务器的web资源时，可以把各自的数据放在各自的session中，当用户再去访问服务器中的其它web资源时，其它web资源再从用户各自的session中取出数据为用户服务。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Cookie API -->
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-code text-blue-600"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-800">Cookie的API</h3>
                    </div>
                    
                    <div class="bg-gray-800 rounded-lg p-4 overflow-x-auto">
                        <pre class="text-gray-300 text-sm">
<code>javax.servlet.http.Cookie类用于创建一个Cookie，
response接口中定义了一个addCookie方法，它用于在其响应头中增加一个相应的Set-Cookie头字段。
同样，request接口中也定义了一个getCookies方法，它用于获取客户端提交的Cookie。

Cookie类的方法：
public Cookie(String name,String value)
setValue与getValue方法
setMaxAge与getMaxAge方法 (秒)
setPath与getPath方法
setDomain与getDomain方法</code>
                        </pre>
                    </div>
                </div>
                
                <!-- Cookie细节 -->
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-info-circle text-yellow-600"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-800">Cookie的细节</h3>
                    </div>
                    
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1 mr-3 text-yellow-600">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <p class="text-gray-700">一个Cookie只能标识一种信息，它至少含有一个标识该信息的名称（NAME）和设置值（VALUE）。</p>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1 mr-3 text-yellow-600">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <p class="text-gray-700">一个WEB站点可以给一个WEB浏览器发送多个Cookie，一个WEB浏览器也可以存储多个WEB站点提供的Cookie。</p>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1 mr-3 text-yellow-600">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <p class="text-gray-700">浏览器一般只允许存放300个Cookie，每个站点最多存放20个Cookie，每个Cookie的大小限制为4KB。</p>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1 mr-3 text-yellow-600">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <p class="text-gray-700">如果创建了一个cookie，并将他发送到浏览器，默认情况下它是一个会话级别的cookie（即存储在浏览器的内存中），用户退出浏览器之后即被删除。</p>
                        </div>
                        
                        <div class="flex items-start">
                            <div class="flex-shrink-0 mt-1 mr-3 text-yellow-600">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <p class="text-gray-700">若希望浏览器将该cookie存储在磁盘上，则需要使用maxAge，并给出一个以秒为单位的时间。将最大时效设为0则是命令浏览器删除该cookie。注意，删除cookie时，path必须一致，否则不会删除。</p>
                        </div>
                    </div>
                </div>
                
                <!-- Cookie应用 -->
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-lightbulb text-purple-600"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-800">Cookie的应用</h3>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="p-4 bg-purple-50 rounded-lg">
                            <h4 class="font-bold text-purple-800 mb-3">记住用户名</h4>
                            <p class="text-gray-700 mb-3">实现思路：</p>
                            <ol class="list-decimal list-inside space-y-2 text-gray-700">
                                <li>在登录表单添加一个复选框，用于是否记住登录名</li>
                                <li>在处理登录的Servlet中，判断是否勾选了复选框</li>
                                <li>如果有勾选，则保存当前用户信息，并通过cookie的方式保存到客户端上</li>
                            </ol>
                        </div>
                        
                        <div class="p-4 bg-teal-50 rounded-lg">
                            <h4 class="font-bold text-teal-800 mb-3">商品的浏览历史记录</h4>
                            <p class="text-gray-700 mb-3">用户每点击一个商品查看商品详情的时候，就会将浏览过的商品id记录进来。</p>
                            <p class="text-gray-700">假设最多存储5个最近浏览历史记录</p>
                            <div class="mt-4 p-3 bg-white rounded border border-gray-200">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm font-medium">浏览历史</span>
                                    <span class="text-xs text-gray-500">最多5条</span>
                                </div>
                                <div class="space-y-2">
                                    <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
                                        <span class="text-sm">商品ID: 1001</span>
                                        <button class="text-red-400 hover:text-red-600">
                                            <i class="fas fa-times text-xs"></i>
                                        </button>
                                    </div>
                                    <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
                                        <span class="text-sm">商品ID: 2045</span>
                                        <button class="text-red-400 hover:text-red-600">
                                            <i class="fas fa-times text-xs"></i>
                                        </button>
                                    </div>
                                    <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded">
                                        <span class="text-sm">商品ID: 3078</span>
                                        <button class="text-red-400 hover:text-red-600">
                                            <i class="fas fa-times text-xs"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Session部分 -->
                <div id="session" class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-project-diagram text-indigo-600"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-800">Session</h3>
                    </div>
                    
                    <div class="p-4 bg-indigo-50 rounded-lg mb-6">
                        <p class="text-gray-700">在WEB开发中，服务器可以为每个用户浏览器创建一个会话对象（session对象），注意：一个浏览器独占一个session对象(默认情况下)。因此，在需要保存用户数据时，服务器程序可以把用户数据写到用户浏览器独占的session中，当用户使用浏览器访问其它程序时，其它程序可以从用户的session中取出该用户的数据，为用户服务。</p>
                        <p class="text-gray-700 mt-3">Session和Cookie的主要区别在于：Cookie是把用户的数据写给用户的浏览器。Session技术把用户的数据写到用户独占的session中。Session对象由服务器创建，开发人员可以调用request对象的getSession方法得到session对象。</p>
                    </div>
                    
                    <div class="grid md:grid-cols-2 gap-6">
                        <!-- Session实现原理 -->
                        <div class="p-4 bg-blue-50 rounded-lg">
                            <h4 class="font-bold text-blue-800 mb-3">Session实现原理</h4>
                            <p class="text-gray-700 mb-3">当程序需要为某个客户端的请求创建一个session时，服务器首先检查这个客户端的请求里是否已包含了一个session标识（称为session id），如果已包含则说明以前已经为此客户端创建过session，服务器就按照session id把这个session检索出来使用（检索不到，会新建一个），如果客户端请求不包含session id，则为此客户端创建一个session并且生成一个与此session相关联的session id，session id的值应该是一个既不会重复，又不容易被找到规律以仿造的字符串，这个session id将被在本次响应中返回给客户端保存。</p>
                            <p class="text-gray-700">保存这个session id的方式可以采用cookie，这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。一般这个cookie的名字都是类似于SEEESIONID。</p>
                        </div>
                        
                        <!-- Session应用 -->
                        <div class="p-4 bg-purple-50 rounded-lg">
                            <h4 class="font-bold text-purple-800 mb-3">Session应用</h4>
                            
                            <div class="mb-4">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-shopping-cart text-purple-600 mr-2"></i>
                                    <h5 class="font-semibold">购物车</h5>
                                </div>
                                <p class="text-gray-700 text-sm">将购物车信息保存在session中</p>
                            </div>
                            
                            <div class="mb-4">
                                <div class="flex items-center mb-2">
                                    <i class="fas fa-shield-alt text-purple-600 mr-2"></i>
                                    <h5 class="font-semibold">验证码</h5>
                                </div>
                                <p class="text-gray-700 text-sm">校验验证码的正确性</p>
                            </div>
                            
                            <div>
                                <p class="text-gray-700">一次性验证码的主要目的就是为了限制人们利用工具软件来暴力猜测密码。服务器程序接收到表单数据后，首先判断用户是否填写了正确的验证码，只有该验证码与服务器端保存的验证码匹配时，服务器程序才开始正常的表单处理流程。密码猜测工具要逐一尝试每个密码的前题条件是先输入正确的验证码，而验证码是一次性有效的，这样基本上就阻断了密码猜测工具的自动地处理过程。</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Session导图 -->
                <div class="card bg-white p-6 rounded-lg">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-teal-100 rounded-full flex items-center justify-center mr-4">
                            <i class="fas fa-map text-teal-600"></i>
                        </div>
                        <h3 class="text-2xl font-semibold text-gray-800">Session导图</h3>
                    </div>
                    
                    <div class="mermaid">
                        graph TD
                            A[Session] --> B[创建与获取]
                            A --> C[常用方法]
                            A --> D[生命周期]
                            A --> E[实际应用]
                            
                            B --> B1[request.getSession()]
                            B --> B2[request.getSession(true)]
                            B --> B3[request.getSession(false)]
                            
                            C --> C1[setAttribute]
                            C --> C2[getAttribute]
                            C --> C3[removeAttribute]
                            C --> C4[invalidate]
                            C --> C5[getId]
                            
                            D --> D1[创建: 第一次调用getSession]
                            D --> D2[销毁: 超时/invalidate/服务器关闭]
                            D --> D3[超时时间配置]
                            
                            E --> E1[购物车]
                            E --> E2[用户登录状态]
                            E --> E3[验证码校验]
                            E --> E4[防止表单重复提交]
                    </div>
                    
                    <div class="mt-4 text-center">
                        <a href="https://www.yuque.com/attachments/yuque/0/2023/xmind/21449790/1692788376273-04b6d800-ea1d-462c-b3e5-a687b4786fe1.xmind" 
                           class="inline-flex items-center text-blue-600 hover:text-blue-800" 
                           target="_blank">
                            <i class="fas fa-external-link-alt mr-2"></i>
                            下载完整Session思维导图
                        </a>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="container mx-auto max-w-5xl px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-semibold mb-2">技术小馆</h3>
                    <p class="text-gray-400">探索技术的无限可能</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" 
                       class="text-gray-300 hover:text-white transition-colors duration-300"
                       target="_blank">
                        <i class="fas fa-globe mr-2"></i>
                        http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-6 pt-6 text-center text-gray-500 text-sm">
                &copy; 2023 技术小馆. All rights reserved.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```